<template>
	<div class="content">
		<div class="content-top">
			车辆管理_车辆实时轨迹
		</div>
		
			<el-card class="box-card">
			  <div slot="header" class="clearfix">
			    <span>车辆基本数据</span>
			    <el-button @click='close' style="float: right; padding: 3px 0" type="text"><i class="el-icon-close"></i>关闭</el-button>
			  </div>
			 <el-row>
			 	<el-col :span="8">车牌号：{{info.licensePlateNumber}}</el-col>
			 	<el-col :span="8">车架号：{{info.vin}}</el-col>
			 	<el-col :span="8">车辆型号：<template v-if="item.value == info.vehicleType" v-for='item in dict.vehicleType'>{{item.type}}
			 		</template></el-col>
			 </el-row>
			 <el-row class="car-card-line">
			 	<el-col :span="8">车主姓名：{{info.ownerName}}</el-col>
			 	<el-col :span="8">联系电话：{{info.ownerPhoneNum}}</el-col>
			 	<el-col :span="8">所属企业：{{info.enterpriseName}}</el-col>
			 </el-row>
			 <el-row class="car-card-line">
			 	<el-col :span="8">联系人姓名：{{info.chineseName}}</el-col>
			 	<el-col :span="8">联系人电话：{{info.contactsPhoneNum}}</el-col>
			 	<el-col :span="8">使用性质：<template v-if="item.value == info.property" v-for='item in dict.property'>{{item.type}}
					</template></el-col>
			 </el-row>
			</el-card>
		
		<div style="height: 400px;margin: 20px 20px 20px 20px;border: 1px solid #B8BECC;" id="container"></div>
		<div class="content-table" style="max-height: 270px;">
			<el-table :data="tableData" show-header stripe style="width: 100%;">
				<el-table-column prop="licensePlateNumber" label="车牌号" width="100">
				</el-table-column>
				<el-table-column prop="licensePlateNumber" label="司机姓名" width="150">
				</el-table-column>
				<el-table-column prop="speed" label="时速" width="100">
				</el-table-column>
				<el-table-column prop="mileage" label="累计里程" width="100">
				</el-table-column>
				<el-table-column prop="longitude" label="当前经度" width="200">
				</el-table-column>
				<el-table-column prop="latitude" label="当前纬度" width="200">
				</el-table-column>
				<el-table-column prop="soc" label="剩余电量" width="100">
				</el-table-column>
				<el-table-column prop="alertStatus" label="报警信息">
					<template slot-scope="scope">
						<div v-if="scope.row.alertStatus != null " >
						{{scope.row.alertStatus.highestAlertLevel}} 
							<span style="color: red;" v-if="scope.row.alertStatus.alert.temperatureDifferenceAlert">温度差异报警 </span> 
							<span style="color: red;" v-if="scope.row.alertStatus.alert.cellHighTemperatureAlert">电池高温报警 </span> 
							<span style="color: red;" v-if="scope.row.alertStatus.alert.driveMotorControllerTemperatureAlert">驱动电机控制器温度报警 </span> 
							<span style="color: red;" v-if="scope.row.alertStatus.alert.highVoltageInterlockStatusAlert"> 高压互锁状态报警 </span>
							<span style="color: red;" v-if="scope.row.alertStatus.alert.driveMotorTemperatureAlert">驱动电机温度报警 </span>
							<span style="color: red;" v-if="scope.row.alertStatus.alert.energyStorageOvercharge">车载储能装置类型过充 </span>
							<span style="color: red;" v-if="scope.row.alertStatus.alert.energyStorageOverVoltageAlert">车载储能装置类型过压报警 </span>
							<span style="color: red;" v-if="scope.row.alertStatus.alert.energyStorageUnderVoltageAlert">车载储能装置类型欠压报警 </span>
							<span style="color: red;" v-if="scope.row.alertStatus.alert.soclowAlert">SOC低报警 </span>
							<span style="color: red;" v-if="scope.row.alertStatus.alert.cellOverVoltageAlert">单体电池过压报警 </span>
							<span style="color: red;" v-if="scope.row.alertStatus.alert.cellUnderVoltageAlert">单体电池欠压报警 </span>
							<span style="color: red;" v-if="scope.row.alertStatus.alert.sochighAlert">SOC过高报警 </span>
							<span style="color: red;" v-if="scope.row.alertStatus.alert.socjumpAlert">SOC跳变报警 </span>
							<span style="color: red;" v-if="scope.row.alertStatus.alert.energyStorageSystemNotMatchAlert">可充电储能系统不匹配报警 </span>
							<span style="color: red;" v-if="scope.row.alertStatus.alert.cellConsistencyDifferenceAlert">电池单体一致性差报警 </span>
							<span style="color: red;" v-if="scope.row.alertStatus.alert.insulationAlert">绝缘报警 </span>
							<span style="color: red;" v-if="scope.row.alertStatus.alert.dctemperatureAlert">DC-DC温度报警 </span>
							<span style="color: red;" v-if="scope.row.alertStatus.alert.brakingSystemAlert">制动系统报警 </span>
							<span style="color: red;" v-if="scope.row.alertStatus.alert.dcstatusAlert">DC-DC状态报警 </span>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="acquisitionTime" label="时间" width="200">
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	let _this;
	export default{
		props:['id'],
		data(){
			return{
				info:{},
				dict:'',
				gdmap:'',
				tableData:[],
				gps_list:[],
			}
		},
		created(){
			_this = this;
		},
		mounted(){
			this.init();
			this.get_dict();
			this.get_info();
		},
		methods:{
			init() {
				var map = new AMap.Map('container', {
					zoom: 11, //级别
					center: [120.69889, 27.993148], //中心点坐标
				});
				this.gdmap = map;
			},
			get_dict(){
				this.$axios.get(this.$global.serverIp + 'admin/dict/findDict?keyword=vehicle')
					.then(function(res) {
						if (res != '')
							_this.dict = res.data;
					})
			},
			get_info() {
				this.$axios.get(this.$global.serverIp + 'vehicle/vehicle/detail/' + this.id)
					.then(function(res) {
						if (res != '') {
							_this.info = res.data;
							_this.get_gps();
							window.getGpsInterval = setInterval(_this.get_gps, 5000);
						}
					})
			
			},
			get_gps() {
				this.$axios.get(this.$global.serverIp + 'vehicleExec/vehicleStatistics/findRealTimeRoute/' + _this.id)
					.then(function(res) {
						console.log(res);
						if (res != '') {
							if(res.data != undefined){
								_this.tableData.unshift(res.data);
								_this.show_gps_point(res.data);
							}
							
						}
			
					})
			},
			show_gps_point(info) {
				console.log(info);
				if (_this.tableData.length == 1) {
					_this.gps_list[0] = [info.longitude, info.latitude];
					_this.gps_list[1] = [info.longitude, info.latitude];
					var lineArr = [
						[info.longitude, info.latitude]
					];
					_this.gps_marker = new AMap.Marker({
						map: _this.gdmap,
						position: [info.longitude, info.latitude],
						icon: "https://webapi.amap.com/images/car.png",
						offset: new AMap.Pixel(-26, -13),
						autoRotation: true,
						angle: -90,
					});
					// 绘制轨迹
					var polyline = new AMap.Polyline({
						map: _this.gdmap,
						path: lineArr,
						showDir: true,
						strokeColor: "#28F", //线颜色
						// strokeOpacity: 1,     //线透明度
						strokeWeight: 6, //线宽
						// strokeStyle: "solid"  //线样式
					});
			
					var passedPolyline = new AMap.Polyline({
						map: _this.gdmap,
						// path: lineArr,
						strokeColor: "#AF5", //线颜色
						// strokeOpacity: 1,     //线透明度
						strokeWeight: 6, //线宽
						// strokeStyle: "solid"  //线样式
					});
			
			
					_this.gps_marker.on('moving', function(e) {
						passedPolyline.setPath(e.passedPath);
					});
			
					_this.gdmap.setFitView();
				} else {
					_this.gps_list[0] = _this.gps_list[1];
					_this.gps_list[1] = [info.longitude, info.latitude];
					var line = [];
					line.push(_this.gps_list[0]);
					line.push(_this.gps_list[1]);
					var polyline = new AMap.Polyline({
						map: _this.gdmap,
						path: line,
						showDir: true,
						strokeColor: "#28F", //线颜色
						// strokeOpacity: 1,     //线透明度
						strokeWeight: 6, //线宽
						// strokeStyle: "solid"  //线样式
					});
					// var interval = setInterval("getPoint()",5000);
					_this.gps_marker.moveAlong(line, 200);
					_this.gdmap.setFitView();
				}
			
				var mk = new AMap.Marker({
					position: [info.longitude, info.latitude]
					// map: _this.gdmap
				});
				_this.infoWindow = new AMap.InfoWindow({
					offset: new AMap.Pixel(0, -30),
					size: new AMap.Size(120, 70),
				});
				mk.content = "<br>速度：" + info.speed + " km/h<br>能耗率：" + info.fuelConsumptionRate + " (kg标油/t)<br>剩余电量：" + info.soc +
					' %';
			
				mk.on('click', _this.markerClick);
				mk.emit('click', {
					target: mk
				});
			},
			markerClick(e) {
			
				this.infoWindow.setContent(e.target.content);
				this.infoWindow.open(this.gdmap, e.target.getPosition());
			},
			beforeDestory() {
				clearInterval(window.getGpsInterval);
			},
			destoryed() {
				clearInterval(window.getGpsInterval);
			},
			close(){
				clearInterval(window.getGpsInterval);
				this.$emit("close", 0);
			}
		}
	}
</script>

<style>
	.box-card{
		margin: 20px;
	}
	.car-card-line{
		margin-top: 20px;
	}
	.amap-info-content{
		font-size: 12px!important;
		padding: 0 0 0 5px!important;
	}
</style>
